<template>
  <div id="app">
    <h2>--------App.vue----------</h2>
    <button @click="addClick">+</button>
    <button @click="subClick">-</button>
    <button @click="addCountClick(5)">+5</button>
    <button @click="addCountClick(10)">+10</button>
    <button @click="addStuClick">添加学生</button>
    <button @click="updateInfoClick">更新vuex中定义的info对象</button>
    <button @click="aUpdateInfoClick">
      测试使用actions更新mutations中的state的数据状态
    </button>
    <!-- <p>{{ count }}</p> -->
    <p>{{ $store.state.count }}</p>
    <p>{{ $store.state.info }}</p>

    <h2>--------App.vue：getters----------</h2>
    <p>{{ $store.getters.powerCount }}</p>
    <p>{{ $store.getters.more20Stu }}</p>
    <p>{{ $store.getters.more20StuLen }}</p>
    <p>{{ $store.getters.moreAgeStu(18) }}</p>

    <h2>--------App.vue：modules----------</h2>
    <p>{{ $store.state.a.name }}</p>
    <button @click="updateNameClick">更新vuex中定义的name</button>
    <p>{{ $store.getters.fullName0 }}</p>
    <p>{{ $store.getters.fullName1 }}</p>
    <p>{{ $store.getters.fullName2 }}</p>
    <button @click="aUpdateNameClick">使用actions更新vuex中定义的name</button>

    <h2>--------HelloWorldVuex.vue----------</h2>
    <!-- <hello-world-vuex :count="count" /> -->
    <hello-world-vuex />
  </div>
</template>

<script>
import HelloWorldVuex from "./components/HelloWorldVuex.vue";
import { INCREMENT } from "./stores/mutations-types";

export default {
  name: "App",
  data() {
    return {
      //count: 0,
    };
  },
  components: {
    HelloWorldVuex,
  },
  methods: {
    addClick() {
      //this.count++;
      this.$store.commit(INCREMENT); // Vuex中更新state状态的唯一方式是：提交mutations
    },
    subClick() {
      //this.count--;
      this.$store.commit("decrement");
    },
    addCountClick(num) {
      this.$store.commit("incrementCount", num);
    },
    addStuClick() {
      const stu = {
        id: 108,
        name: "xiaowo",
        age: 26,
      };
      this.$store.commit("addStudent", stu);
    },
    updateInfoClick() {
      this.$store.commit("updateInfo");
    },
    aUpdateInfoClick() {
      // this.$store.dispatch("aUpdateInfo", {
      //   message: "我是携带的信息",
      //   success: () => {
      //     console.log("里面已经完成了");
      //   },
      // });

      // 使用Promise，更优雅的方式
      this.$store.dispatch("aUpdateInfo", "我是携带的信息").then((res) => {
        console.log("里面已经完成了");
        console.log(res); // 打印actions回传的数据
      });
    },
    updateNameClick() {
      this.$store.commit("updateName", "zhangsanfeng"); // 提交moduleA中的mutations中的updateName
    },
    aUpdateNameClick() {
      this.$store.dispatch("aUpdateName");
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
